<template>
	<view :class="['page',{'iphoneX':isIphoneX}]">
		<template v-if="isLogin">   
			<view class="body">
				<view class="form-wrap m-b2">
					<view class="form-item">
						<view class="label">可用药量：</view>
						<view class="form-input">
							<view class="content">
								<input type="digit" class="inp" :value="sum" disabled placeholder="输入可用药量" />
								<view class="link">{{potion_unit}}</view>
							</view>
						</view>
					</view>
			
					<view class="form-item">
						<view class="label">防控区域：</view>
						<view class="form-input">
							<view class="content">
								<input type="digit" class="inp" v-model="params.address" placeholder="输入防控区域" />
								<view class="link">亩</view>
							</view>
						</view>
					</view>
					
					<view class="form-item">
						<view class="label">防控面积：</view>
						<view class="form-input">
							<view class="content">
								<input type="digit" class="inp" v-model="params.fk_area" placeholder="输入防控面积" />
								<view class="link">亩</view>
							</view>
						</view>
					</view>
					
					<view class="form-item">
						<view class="label">本次用药量：</view>
						<view class="form-input">
							<view class="content">
								<input type="digit" class="inp" v-model="params.potion_sum" placeholder="输入本次用药量" />
								<view class="link">{{potion_unit}}</view>
							</view>
						</view>
					</view>
			
					<view class="form-item">
						<view class="label">防控后发生等级：</view>
						<picker class="form-picker" mode="selector" :range="level" @change="changeLevel">
							<view class="picker">
								<input type="text" class="select-data t-l" v-model="params.re_level" placeholder="选择防控后发生等级"
									disabled>
								<view class="icon">
									<view class="iconfont f-s68">&#xeb8a;</view>
								</view>
							</view>
						</picker>
					</view> 
			
					<view class="form-textarea-item">
						<view class="label a-t">备注说明</view>
						<view class="form-textarea">
							<textarea class="inp-textarea" v-model="params.remark" placeholder="输入备注说明" maxlength="-1"></textarea>
						</view>
					</view>
			
				</view>
			
				<!-- 图片上传 -->
				<view class="form-wrap m-b2">
					<view class="upload-pic-item">
						<view class="label">防控照片</view>
						<view class="form-upload-pic">
							<template>
								<view class="img-item" v-for="(item,index) in params.files" :key="index">
									<image src="@/static/images/filter_bg.png" mode="widthFix">
										<!-- 占位 -->
									</image>
									<view class="img-wrap" @click="previewPic(index)">
										<image class="img" :src="item.url" mode="widthFix"></image>
									</view>
									<view class="del-icon" @click="delPic(index)">
										<view class="iconfont">&#xe74b;</view>
									</view>
								</view>
							</template>
							<view class="img-item add-btn" @click="uploadImage">
								<image src="@/static/images/upload_pic.png" mode="widthFix"></image>
							</view>
						</view> 
					</view>
				</view>
			
			</view>
			
			<!-- 底部 -->
			<view class="footer">
				<view class="fix-wrap bottom">
					<view class="btn" @click="submit">确定使用</view>
				</view>
			</view>
			 
		</template>
	</view>
</template>

<script>
	import {
		dateFormat,
		uploadImage,
		previewImage,
		uploadToServe
	} from '@/common/util.js'
	export default {
		name: 'name',
		data() {
			return { 
				isLogin: true,
				isIphoneX: getApp().globalData.isIphoneX,
				userInfo:uni.getStorageSync('userInfo'),
				isShowPrevData: false,
				isStop: true, 
				level:[1,2,3,4,5],
				sum:'',
				potion_unit:'', 
				params: {
					files: [],
					potion_id: '',
					potion_name:'',
					potion_distribute_id: '',
					address: '',
					fk_area: '',
					potion_sum: '',
					re_level: '',
					remark: ''
				} 
			}


		},
		async onLoad(params) {  
			this.params.potion_distribute_id=params.distribute_id;
			this.params.potion_id=params.potion_id;
			this.potion_unit=params.pack_name;
			this.sum=params.sum;
			
			this.isLogin = await this.$loginState('check');		
			if(this.isLogin){
				if(this.page==1){
					 
				} 
			} 
		},
		async onShow() {

		},
		methods: {
			 	 		
			
			// 选择防控后等级
			changeLevel:function(e){
				let idx=e.detail.value;
				this.params.re_level=this.level[idx];
			}, 
			 
			// 上传图片
			uploadImage: function() {
				// 上传现场照片
				let _this = this;
				uploadImage({
					length: _this.params.files.length,
					maxSize: 1,
					success(res) {
						uploadToServe({
							url: '/project/upload-file',
							filePath: res.tempFilePaths[0],
							name: 'photo',
							formData: {
								'p_id': 0,
								'create_uid': _this.userInfo.id
							}
						}).then((up_res) => {
							if (up_res.ret == 0) {
								let params_data = {};
								params_data.file_name = up_res.data.file_name;
								params_data.file_path = up_res.data.file_path;
								params_data.file_type = up_res.data.file_type;
								params_data.status = up_res.data.status;
								params_data.type = up_res.data.type;
								params_data.url = res.tempFilePaths[0];
								_this.params.files = _this.params.files.concat(params_data); 
							}
						})
					}
				})
			},
			
			// 预览图片
			previewPic: function(index) {
				let preview_data = [];
				this.params.files.forEach(item => {
					preview_data.push(item.url);
				})
				previewImage({
					data: preview_data,
					index: index
				})
			},
			
			// 删除图片
			delPic: async function(index) {
				let res=await this.$api.ycj_api.deletefile({
					file_path:this.params.files[index].file_path
				}) 
				if(res.data.ret==0){
					this.params.files.splice(index, 1);
				} 
			}, 
			 
			
			// 添加药剂
			submit:async function(){
				let _this=this;
				if(this.params.address==''){
					uni.showToast({
						icon: 'none',
						title: '请输入防控区域',
						mask: true,
						duration: 1000
					})
					return
				}
				if(this.params.fk_area==''){
					uni.showToast({
						icon: 'none',
						title: '请输入防控面积',
						mask: true,
						duration: 1000
					})
					return
				}
			 
				if(this.params.potion_sum==''){
					uni.showToast({
						icon: 'none',
						title: '请输入本次用药量',
						mask: true,
						duration: 1000
					})
					return
				}else if(parseInt(this.params.potion_sum)>parseInt(this.sum)){
					uni.showToast({
						icon: 'none',
						title: '用药量超出可用药量范围',
						mask: true,
						duration: 1000
					})
					return
				}else if(!(/(^[1-9]\d*$)/.test(this.params.potion_sum))){
					uni.showToast({
						icon: 'none',
						title: '请输入合法的用药数量',
						mask: true,
						duration: 1000
					})
					return
				}
				
				if(this.params.re_level==''){
					uni.showToast({
						icon: 'none',
						title: '请选择防控后等级',
						mask: true,
						duration: 1000
					})
					return
				}  
				if(this.params.files.length==''){
				   	uni.showToast({
				   		icon: 'none',
				   		title: '请上传防控照片',
				   		mask: true,
				   		duration: 1000
				   	})
				   	return
				} 
				uni.showLoading({
					title:"数据提交中..."
				})
				
				if(this.isStop){
					// this.isStop=false;
					let res=await this.$api.ycj_api.addFkData({
						files: JSON.stringify(this.params.files),
						potion_id: this.params.potion_id,
						potion_distribute_id: this.params.potion_distribute_id,
						address: this.params.address,
						fk_area: this.params.fk_area,
						potion_sum: this.params.potion_sum,
						re_level: this.params.rl_level,
						remark: this.params.remark
					}) 
					if(res.data.ret==0){
						uni.hideLoading();
						this.$store.commit('UPDATE_YAOJI_SUM',true);   // 药剂剩余数量更新
						uni.showToast({
							icon: 'success',
							title: '用药成功',
							mask: true,
							duration: 2000,
							success() {
								setTimeout(()=>{
									_this.isStop=true;
									uni.navigateBack({
										delta:1
									})
								},2000)
							}
						})
					}else{
						uni.hideLoading();
						uni.showToast({
							icon: 'none',
							image:'../../static/image/error.png',
							title: res.data.data,
							mask: true,
							duration: 2000,
							success() {
								setTimeout(()=>{
									_this.isStop=true; 
								},2000)
							}
						})
					}
				}
				 
				
			} 
 
		},
		components: {},

		computed: {
			specs_update(){ 
				return this.$store.state.yjSpecsUpdate;
			}
		},
		watch: {
			specs_update(newer,older){
				if(newer!=older){
					this.specs=[];
					this.getSpecs();
				}
			}
		}

	}
</script>

<style lang="less">
	.form-wrap .label {
		width: 35%;
	}

	.form-wrap .content .link {
		color: #000;
	}

	.status {
		padding: 0 20rpx;
		color: #f00;
		font-size: 28rpx;
	}

	.btn {
		@h: 80rpx;
		width: 98%;
		margin: 10rpx auto;
		text-align: center;
		height: @h;
		line-height: @h;
		background: linear-gradient(#e96b5c, #ce3c2f);
		border-radius: 10rpx;
		color: #fff;
		font-size: 34rpx;
	}

	 
</style>
